// 管理员个人中心内容组件
Vue.component('admin-profile-content', {
  data() {
    // 从localStorage读取用户信息
    const userInfo = JSON.parse(localStorage.getItem('user') || '{}');
    
    return {
      activeTab: 'info',
      name: userInfo.name || '未设置',
      gender: userInfo.gender || '未设置',
      birth_date: userInfo.birth_date || '未设置',
      phone: userInfo.phone || '未设置',
      email: userInfo.email || '未设置',
      address: userInfo.address || '未设置',
      avatar: userInfo.avatar || '',
    };
  },
  mounted() {
    // 处理头像路径
    if (this.avatar) {
      this.avatar = this.processAvatarPath(this.avatar);
    }
    
    // 监听用户信息更新事件
    this.$root.$on('user-info-updated', (userInfo) => {
      this.updateUserInfo(userInfo);
    });
    
    this.$root.$on('avatar-updated', (avatarUrl) => {
      this.avatar = avatarUrl;
    });
  },
  beforeDestroy() {
    // 清理事件监听
    this.$root.$off('user-info-updated');
    this.$root.$off('avatar-updated');
  },
  methods: {
    processAvatarPath(avatarPath) {
      if (!avatarPath) return '';
      // 将反斜杠转换为正斜杠，并确保以/开头
      let processedPath = avatarPath.replace(/\\/g, '/');
      if (!processedPath.startsWith('/')) {
        processedPath = '/' + processedPath;
      }
      return processedPath;
    },
    updateUserInfo(userInfo) {
      // 更新组件数据
      this.name = userInfo.name || '未设置';
      this.gender = userInfo.gender || '未设置';
      this.birth_date = userInfo.birth_date || '未设置';
      this.phone = userInfo.phone || '未设置';
      this.email = userInfo.email || '未设置';
      this.address = userInfo.address || '未设置';
      this.avatar = this.processAvatarPath(userInfo.avatar || '');
    }
  },
  template: `
    <div style="padding: 32px; width: 100%; box-sizing: border-box;">
      <el-card shadow="hover" style="width: 100%;">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="个人信息" name="info">
            <profile-info :info="{
              name,
              gender,
              birth_date,
              phone,
              email,
              address
            }"></profile-info>
          </el-tab-pane>
          <el-tab-pane label="头像修改" name="avatar">
            <profile-avatar :avatar-url="avatar"></profile-avatar>
          </el-tab-pane>
          <el-tab-pane label="密码修改" name="password">
            <profile-password></profile-password>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  `,
});
